<template>
  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <!--搜索栏-->
    <common-list-search-bar
      ref="commonListSearchBar"
      v-if="searchSittingArray.length>0"
      :field-arr="searchSittingArray"
      :search-list="searchList">
      <template slot="actButton">
        <my-button type="primary" :click="function (){createUser({id:0})}" access-action="User/manage" text="新增"></my-button>
      </template>
    </common-list-search-bar>
    <common-list-table
      v-if="searchSittingArray.length>0"
      ref="myCommonListTable"
      :sitting="listTableSitting"
      :search-list="searchList">
      <template slot="actSlot" slot-scope="scope">
        <my-button type="primary" :click="function (){createUser(scope)}" text="编辑" access-action="User/manage"></my-button>
        <my-button type="primary" :click="function (){changePassword(scope)}" text="更改密码" access-action="User/manage"></my-button>
        <my-button type="success" :click="function (){getLoginLogList(scope)}" text="查看登录日志" access-action="User/manage"></my-button>
        <my-button type="warning" :click="function (){clearLoginError(scope)}" :disabled="scope.rowInfo.status.id!==2" text="清除登录错误" access-action="User/manage"></my-button>
        <my-button type="danger" :click="function (){del(scope)}" text="删除" access-action="User/manage"></my-button>
      </template>
    </common-list-table>

    <create-sys-user-dialog ref="createSysUserDialog" :success-function="searchList"/>
    <user-login-log-dialog ref="user-login-log-dialog"/>
  </div>
</template>

<script>


import CreateSysUserDialog from '../Dialog/CreateSysUserDialog'
import MyButton from '../Common/MyButton'
import UserLoginLogDialog from '../Dialog/UserLoginLogDialog'

var fieldArr = DemoData.SysUser.field
export default {
  name: 'SysUserPage',
  components: {UserLoginLogDialog, MyButton, CreateSysUserDialog, },
  props: {
    belongUser:{
      type: Object,
      required: false,
      default: function () {
        return {
          userType: 'Shop',
          // id:0,
        }
      },
    }
  },
  mounted () {
    let $this=this
    $this.getFieldArr(function () {
      $this.searchList()
    })
  },
  data: function () {
    return {
      loading: false,
      // 搜索栏配置项
      searchSittingArray: [],
      listTableSitting: {
        modelName: '店员管理',
        fieldArr: [],
        tableHeight: this.getTableHeight(),
        page: 1,
        pageSize: 20,
        actColumnWidth:480,
        defaultSort: {
          // prop:'username',
          // order:'descending',
        }
      }
    }
  },
  methods: {
    getFieldArr:function (callback) {
      this.fieldArr=[]
      let $this=this
      var roleArrIndex=-1
      fieldArr.forEach(function (value, index) {
        if (value.field==='role'){
          roleArrIndex=index
        }
      })
      $this.MyRequest(this.ApiDoNameShop+'User/getRoleList',{},function (roleList) {
        fieldArr[roleArrIndex].typeArr=roleList
        $this.$set($this.listTableSitting,'fieldArr',fieldArr)
        $this.searchSittingArray=fieldArr;
        setTimeout(function () {
          callback()
        })
      })
    },
    getTableHeight: function () {
      var height = this.getWinSize().height - 225
      return height > 500 ? height : 500
    },
    // 初始化查询
    searchList: function () {
      // 表格列表,查询参数
      var listTableForm = this.$refs.myCommonListTable.formData

      // 搜索栏,查询参数
      var searchBarForm = {}
      if (this.$refs.commonListSearchBar) {
        searchBarForm = this.$refs.commonListSearchBar.getFormData()
      }

      var form = Object.assign({}, listTableForm, searchBarForm)
      // 如果有默认排序 && 默认排序数据未设置,就进行查询请求(默认排序设置会触发查询)
      if (this.listTableSitting.defaultSort && this.listTableSitting.defaultSort.prop && this.$refs.myCommonListTable.formData.sortOrder === '') {
        return ''
      } else {

      }
      let $this = this
      $this.loading = true
      $this.MyRequest($this.ApiDoNameShop + 'User/getList', form, function (data) {
        $this.$refs.myCommonListTable.setListData(data)
        $this.loading = false
        $this.$forceUpdate()
      })
      // console.log('全部,查询参数',form)
    },
    // 显示详情
    changePassword: function (info) {
      this.$prompt('请输入 新密码', '『' + info.rowInfo.username + '』 更改密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[a-zA-Z0-9_-]{6,30}$/,//,
        inputErrorMessage: '新密码长度必须在6至30位之间'
      }).then(({value}) => {
        let $this = this
        $this.loading = true
        $this.MyRequest($this.ApiDoNameShop + 'User/update', {
          id: info.rowInfo.id,
          password: value
        }, function () {
          $this.loading = false
          $this.$message({
            type: 'success',
            message: '更改成功'
          })
          $this.$forceUpdate()
        }, function () {
          $this.loading = false
        })
      }).catch(() => {

      })
    },
    getLoginLogList: function (info) {
      let userId=info.rowInfo.id
      this.$refs['user-login-log-dialog'].open('Shop',userId)
    },
    clearLoginError: function (info) {
      let $this = this
      $this.loading = true
      $this.MyRequest($this.ApiDoNameShop + 'User/clearLoginDayError', {
        id: info.rowInfo.id,
      }, function () {
        $this.loading = false
        $this.searchList()
        $this.$message.success('清除完毕')
        $this.$forceUpdate()
      }, function () {
        $this.loading = false
      })
    },
    // 删除单条数据
    del: function (info) {
      this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let $this = this
        $this.loading = true
        $this.MyRequest($this.ApiDoNameShop + 'User/delete', {id: info.rowInfo.id}, function () {
          $this.loading = false
          $this.$message({
            type: 'success',
            message: '删除成功'
          }, function () {
            $this.loading = false
          })
          $this.searchList()
          $this.$forceUpdate()
        })
      })
    },
    // 创建用户
    createUser: function (userInfoParams) {
      var userData = {}
      if (userInfoParams && userInfoParams.rowInfo) {
        userData = userInfoParams.rowInfo
      }
      this.$refs.createSysUserDialog.open(userData,this.$props.belongUser)
    }
  }
}
</script>

<style scoped>

</style>
